<template>

	<view class="root">

		<view class="content">

			<u-input :custom-style="customStyle" v-model="inputContent" type="textarea" height="170"
				placeholder="请输入评论内容" :clearable="false"></u-input>

		</view>


		<view class="bottom-view">

			<button class="btn" type="primary" ripple @click="tijiao">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					'background-color': '#ffffff',
					'padding': '15rpx 20rpx 15rpx 20rpx',
					'margin-bottom': '30rpx'
				},
				inputContent: "",
				movieId: ""
			}
		},
		onLoad(res) {
			this.movieId = res.movieId;
		},
		methods: {
			tijiao() {
				
				if(this.inputContent===''){
					uni.showToast({
						title: '请输入评论内容',
						duration: 2000,
						icon: 'none',
						position: 'bottom'
					});
					return;
				}
				
				this.$u.post('/client/comments/sendcomment', {
					movieId: this.movieId,
					content: this.inputContent
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功',
							duration: 2000,
							icon: 'none',
							position: 'bottom'
						});
						setTimeout(function() {
							uni.navigateBack({})
						}, 1300)
					}

				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color-grey;
	}

	.root {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content {
		display: flex;
		width: 100%;
		flex-direction: column;
		padding: 50rpx;

		.title {
			margin-bottom: 20rpx;
			font-size: 16px;
			color: $uni-text-color;
		}
	}

	.bottom-view {
		position: absolute;
		bottom: 60rpx;
		width: 100%;
		padding-left: 50rpx;
		padding-right: 50rpx;

		.btn {
			font-size: 13px;
			line-height: 85rpx;
			color: $uni-bg-color;

		}
	}
</style>
